<template>
  <div class="app-container">
    <!-- 第一排搜索卡片 -->
    <el-card class="box-card">
      <el-row style="font-size: 15px; line-height: 2em; color: #909399" :gutter="60">
        <el-col :span="6">
          <a>
            <img src="../static/主页/3.jpg" width="300px" height="180px" />
          </a>
        </el-col>
        <el-col :span="18">
          <el-form :model="courseFindByPage">
            <el-col :span="12">
              <div class="search">
                课程名称：<el-input v-model="courseFindByPage.etmsCourse.courseTitle" placeholder="课程名称"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                课程类别：
              <el-select v-model="courseFindByPage.etmsCourse.courseType" placeholder="部门类别">
                <el-option v-for="dept in depts" :key="dept.key"  :label="dept.deptName" :value="dept.deptName"></el-option>
              </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                选修必修：
              <el-select v-model="courseFindByPage.etmsCourse.courseRequired" placeholder="选修/必修">
                <el-option label="选修" value="选修"></el-option>
                <el-option label="必修" value="必修"></el-option>
              </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                上传人：{{"\xa0\xa0\xa0\xa0"}}<el-input v-model="courseFindByPage.etmsCourse.createdBy" placeholder="上传人"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search" style="margin-left:690px">
                <el-button type="primary" icon="el-icon-search" @click="getCourseListBySearch">搜索</el-button>
              </div>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 第二排展示 -->
    <el-tabs v-model="activeName" style="margin-top:30px;" type="border-card">
      <div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
          <el-table-column label="课程名称">
            <template slot-scope="scope">
              <span>{{ scope.row.courseTitle }}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程类别">
            <template slot-scope="scope">
              <span>{{ scope.row.courseType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="选修/必修">
            <template slot-scope="scope">
              <span>{{ scope.row.courseRequired }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上传人">
            <template slot-scope="scope">
              <span>{{ scope.row.createdBy }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5,10]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="total"
          style="margin-top: 30px; margin-bottom: 20px; text-align: center;">
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>

<script>
  import {getList} from '@/api/course'
  import {deleteCourse} from '@/api/course'
  import {findAll} from '@/api/dept';

  export default {
    data() {   
      return {
        key: 0,
        depts:{},
        trainForm: "", 
        courseFindByPage: {
          page:1,
          limit:5,
          etmsCourse:{
            courseTitle: "",
            courseType: "",
            createdBy: "",
            courseRequired: "",
          },
        },
        total:0,
        currentPage:1,
        tableData: {},
        
      }

    },
    created() {
      /* 获取查询列表 */
      this.getCourseListBySearch(); 
       /* 动态生成部门选项下拉框 */
      this.allDepts();
    },
    methods: {
      getCourseListBySearch() {
        getList(this.courseFindByPage).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum;
          this.total = res.data.total;
          //this.currentPage = res.data.page;
        })
      },
      handleSizeChange(val) {
        this.courseFindByPage.limit = val;
        getList(this.courseFindByPage).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
        })
      },
      handleCurrentChange(val) {
        this.courseFindByPage.page = val;
        console.log(this.courseFindByPage);
        getList(this.courseFindByPage).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
        })  
        console.log(`当前页: ${val}`);
      },

      handleDetail(index, row) {
      this.$router.push({
        name:'courseDetails',
        query:{
          courseId : row.courseId   
        }
      })
      console.log(index, row.courseId);
      },

      handleDelete(index, row) {
        this.tableData.splice(index,1)
        deleteCourse(row.courseId);
        console.log(index, row);
      },
      allDepts(){
        findAll().then(res =>{
          this.depts = res.data
          console.log(res);
        })
      },
    }
  }

</script>

<style scoped>
  .el-input {
    width: 250px;
  }

  .box-item {
    width: 75%;
    float: right;
  }

  .field-label {
    vertical-align: middle;
  }

  .box-card {
    width: 98%;
    max-width: 100%;
    margin: 20px auto;
  }

  .search {
    margin-top: 10px;
    width: 100%;
    display: flex;
    font-size: 15px;
    line-height: 50px;
  }

</style>
